<template>
  <div style="width: 500px; float: left; margin-top: 50px; margin-left: 100px">
    <div>
      <el-form :model="form" @submit.native.prevent>
        <el-form-item
          label="商品名称"
          :label-width="formLabelWidth"
          prop="waresId"
        >
        <el-input
            type="text"
            v-model="waresName"
            autocomplete="off"
            required
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item
          label="标题"
          :label-width="formLabelWidth"
          prop="afterSalesTitle"
        >
          <el-input
            type="text"
            v-model="form.afterSalesTitle"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item
          label="详情"
          :label-width="formLabelWidth"
          prop="afterSalesDetail"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            required
            v-model="form.afterSalesDetail"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="/api/wares/upload"
            :data="file"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-change="changeUpload"
            :before-upload="beforeUpload"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" @click="changeSign">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>
        </el-form-item>
        <div class="btn">
          <button @click="addAfterSales">提交</button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "afterSales",

  data() {
    return {
      file: {
        sign: "1",
      },
      fileList: [],
      form: {
        afterSalesTitle: "",
        afterSalesDetail: "",
        afterSalesPictures: "",
        waresId: this.$route.query.id,
      },
      formLabelWidth: "120px",
      waresName:this.$route.query.waresName,
    };
  },
  computed: {
    ...mapState({
      successHistoryOrder: (state) => state.center.successHistoryOrder,
    }),
  },
  mounted() {
  },

  methods: {
    changeSign() {
      this.file.sign = Date.now();
    },
    beforeUpload(file) {
      for (let i of this.fileList) {
        if (i.name == file.name) {
          this.$message({
            message: "图片已经存在",
            type: "warn",
          });
          return false;
        }
      }
    },
    changeUpload(file, fileList) {
      if (
        file.raw.type !== "image/png" &&
        file.raw.type !== "image/jpg" &&
        file.raw.type !== "image/jpeg"
      ) {
        this.$message.error("只支持jpg|png|jpeg格式的文档！");

        return;
      }

      let AllCount = fileList.length;

      this.maxFileLen = Math.max(AllCount, this.maxFileLen);

      setTimeout(() => {
        if (AllCount != this.maxFileLen) return;

        this.$refs["fileList"].clearFiles();

        this.beforeUpload(fileList);
      }, 0);
    },
    handleRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (
          this.fileList[i].name == file.name &&
          this.fileList[i].url == file.url
        ) {
          this.fileList.splice(i, 1);
        }
      }
    },
    handleUploadSuccess(res, file, fileList) {
      let newFile = { name: "", url: "" };
      newFile.name = file.name;
      newFile.url = res.data;
      this.fileList.push(newFile);
    },
    async addAfterSales() {
      let form = this.form;
      for (let i = 0; i < this.fileList.length; i++) {
        if (form.afterSalesPictures == "") {
          form.afterSalesPictures = this.fileList[i].url;
        } else {
          form.afterSalesPictures += ";" + this.fileList[i].url;
        }
      }
      try {
        if(form.afterSalesDetail &&
          form.afterSalesPictures &&
          form.afterSalesTitle &&
          form.waresId){
            await this.$store.dispatch("addAfterSales", this.form);
          }else{
            alert("请填写所有信息")
          }
         
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
  line-height: 36px;

  button {
    outline: none;
    width: 270px;
    height: 36px;
    background: #e1251b;
    color: #fff !important;
    display: inline-block;
    font-size: 16px;
  }
}
</style>